<template>
    <div ref="chartRef" :style="{width:'100%',height:'330px'}"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { defineProps, onMounted, ref, watch } from 'vue';

const props=defineProps({
    chartType:{
        default:'bar'
    },
    options:{
        default:()=>({})
    }
})
const chartRef=ref(null)
let chartInstance=null

watch(
    ()=>props.options,
    ()=>{
        if (chartInstance) {
            chartInstance.setOption(props.options)
        }
    },
    {deep:true}
)
const initChart =()=>{
    chartInstance=echarts.init(chartRef.value)
    chartInstance.setOption({
        ...props.options,
        series:[
            {type:props.chartType,
             data:props.options.series&& props.options.series[0].data,
             smooth:props.options.series
            },
            
        ]
    })
}

onMounted(()=>{
    initChart()
})




</script>